<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#app{
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="v1" />*
			<input type="text" v-model="v2"/>
			<button @click="fn">按钮</button>
			<p>原始字符串: {{ message }}</p>
  			<p>计算后反转字符串: {{ site}}</p>
		</div>

	</body>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			 data: {
			    message: 50,
			    v1:10,
			    v2:5
			 },
			 methods:{
			 	fn:function(){
			 		this.message = vm.v1*vm.v2;
			 	},
			 },
			 computed: {
			    // 计算属性的 getter
			    site:{
			    	get: function () {	
				       return this.message+"....."
				    },
				    set: function (newValue) {
		        		this.message = newValue;
		      		}
			    }
			}
		})
		vm.site = '购物快乐 https://www.taobao.com';
	</script>
</html>
